import React, { useState } from 'react'

export default function Hook2() {
    // 首先利用useState定义状态
    const [people, setpeople] = useState(
        [
            { id: 1, name: '大牛逼', age: 66 },
            { id: 2, name: '二牛逼', age: 67 },
            { id: 3, name: '三牛逼', age: 68 },
        ]
    )
   function changeAge(index) {
    // 把状态对象拷贝
    //浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存。
    //深拷贝（deep copy）：复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变。
    const peopleList=[...people];
    // 利用下标找到对应的状态
    peopleList[index].age +=1
    // 重新更新状态
    setpeople(peopleList);
   }
    return (
        // 我们要遍历movie并显示
        <div>
            <ul>
                {
                    people.map((item,index)=>{
                        return(
                            <li key={item.id}>
                                <span>名字是:{item.name}</span>
                                <span>价格是:{item.age}</span>
                                <button onClick={(e)=>{changeAge(index)}}>年龄加1</button>
                            </li> 
                        )
                    })
                }
            </ul>
        </div>
    )
}
